<template>
	<u-popup v-model="showModal" @close="close" :border-radius="20" mode="center" length="auto" :closeable="false">
		<view class="service-contract-wrap u-flex-col u-row-center u-col-center">
			<view class="service-title">
        <view class="title-desc">隐私概况</view>
      </view>
      <view class="service-desc">欢迎来到MAGISCHES ELEMENT麦格莱曼小程序</view>
			<view class="service-content " @tap="jump('/pages/public/richtext', { id: initShop.privacy_protocol })">
        <u-parse :html="initShop.privacy_textrich.content"></u-parse>
			</view>
			<view class="btn-box"><button class="u-reset-button agree-btn" @tap="close">同意</button></view>
		</view>
	</u-popup>
</template>

<script>
import { mapMutations, mapActions, mapState,mapGetters } from 'vuex';
import shRichtext from './sh-richtext.vue';
export default {
	components: {
    shRichtext
  },
	data() {
		return {};
	},
	props: {
		value: {}
	},
	computed: {
		...mapGetters(['initShop']),
		showModal: {
			get() {
				return this.value;
			},
			set(val) {
				this.$emit('input', val);
			}
		}
	},
	methods: {
		close() {
			this.showModal = false;
      uni.setStorageSync('privacy_agree',true);
		},
    jump(path, parmas) {
      this.$Router.push({
        path: path,
        query: parmas
      });
    },
	}
};
</script>

<style lang="scss">
.service-contract-wrap {
	background-color:#fff;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 20rpx;
	width: 680rpx;
  padding: 60rpx 30rpx 50rpx 30rpx;
  box-sizing: border-box;

	.service-title {
    margin-bottom: 30rpx;
    width: 100%;
    text-align: center;
    .title-name{
      font-size: 32rpx;
    }
    .title-desc{
      font-size: 32rpx;
    }
	}
  .service-desc{
    font-size: 28rpx;
    margin-bottom: 20rpx;
    text-align: left;
    width: 100%;
  }
	.service-content {
		text-align: left;
		font-size: 26rpx;
		font-weight: 500;
		color: #7c7c7c;
		line-height: 34rpx;
	}
	.service-tip {
		text-align: left;
		font-size: 26rpx;

		font-weight: 500;
		color: rgba(154, 154, 154, 1);
		line-height: 50rpx;
		padding: 0 40rpx;
	}
	.btn-box {
    width: 100%;
		overflow: hidden;
    margin-top: 50rpx;
		.agree-btn {
			line-height: 70rpx;
			background: #000;
      color: #fff;
			border-radius: 20rpx;
			font-size: 28rpx;
		}
	}
}
</style>
